<template>
  <div>
    <tabbar></tabbar>
    <div class="content">
      <div class="searchBox">
        <div class="tit">微志益论坛</div>
        <input type="text" placeholder="战疫行动">
        <div class="btn" @click="toPost">
          去发帖
        </div>
      </div>
      <div class="center">
        <div class="left">
          <ul class="choseUl">
            <li v-for='(item,i) in smallTitle' :key="i" :class="nowNum==i?'active':``" @click="()=>nowNum=i">{{item}}</li>
          </ul>
          <div class="ulBox" v-if="this.forumData">
            <ul v-show="this.nowNum==0">
              <li v-for="item in this.forumData" :key="item._id">
                <div class="one">
                  <div class="imgBox">
                    <img :src="item.img" alt="论坛文章封面">
                  </div>
                  <div class="txtBox">
                    <p class="name">{{item.name}}</p>
                    <p class="nr">{{item.content}}</p>
                  </div>
                </div>
                <div class="two">
                  <div class="btn">去讨论</div>
                  <p>浏览： {{item.look}}</p>
                  <p>楼主： {{item.lowzhu}}</p>
                </div>
              </li>
            </ul>
            <ul v-show="this.nowNum==1">
              <li>
                暂无关注
              </li>
            </ul>
            <ul v-show="this.nowNum==2">
              <li>
                暂无热门数据
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <div class="hot">
            <div class="tit">
              <i></i>
              近期热榜
              <span>更多</span>
            </div>
            <ul>
              <li v-for="(item,i) in this.forumData.slice(0,5)" :key="item._id">
                <p class="item">
                  <span>{{i+1}}</span>
                  {{item.name}}
                </p>
                <p class="liulan">浏览：{{item.look}}</p>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
    <end></end>
  </div>
</template>
<script>
// api
import {getForum} from '../api/Forum';

export default {
  data () {
    return {
      forumData: "",
      nowNum: 0,
      smallTitle:['推荐','关注','热门']
    }
  },
  methods: {
      toPost(){
        this.$router.push(`/startforum`)
      }
  },
  mounted () {
      getForum().then(res =>{
          // console.log(res)
           this.forumData = res.data.reverse()
        })
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 1200px;
  margin: auto;
  .searchBox {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    height: 50px;
    box-shadow: 0px 2px 2px 0px #ccc;
    z-index: 999;
    background: #fff;
    .tit {
      font-style: italic;
      line-height: 50px;
      padding: 0 80px;
      color: #716457;
      font-weight: bolder;
    }
    input {
      width: 240px;
      height: 30px;
      margin-top: 8px;
      border-radius: 10px;
      outline: none;
      border: none;
      padding-left: 15px;
      font-size: 14px;
      background: #eee;
      margin-left: 140px;
    }
    .btn {
      width: 120px;
      height: 34px;
      margin-top: 6px;
      background: #716457;
      text-align: center;
      line-height: 34px;
      border-radius: 12px;
      color: #fff;
      cursor: pointer;
      opacity: 0.8;
      margin-left: 300px;
    }
    .btn:hover {
      opacity: 1;
    }
  }
  .center {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 40px;
    .left {
      width: 780px;
      padding-left: 40px;
      box-sizing: border-box;
      .choseUl {
        display: flex;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        li {
          padding: 12px 15px;
          margin-right: 10px;
          cursor: pointer;
        }
        .active {
          border-bottom: 2px solid #716457;
          color: #716457;
        }
      }
      .ulBox {
        li {
          border-bottom: 1px solid #ccc;
          padding: 20px 0;
          .one {
            display: flex;
            .imgBox {
              width: 220px;
              height: 120px;
              border: 1px solid #eee;
              overflow: hidden;
              img {
                width: 100%;
                cursor: pointer;
              }
            }
            .txtBox {
              width: 500px;
              // border: 1px solid;
              margin-left: 24px;
              .name {
                font-weight: bolder;
                font-size: 18px;
                padding: 5px 0;
              }
              .nr {
                color: #777;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .nr:hover {
                color: #716457;
              }
            }
          }
          .two {
            height: 40px;
            display: flex;
            margin-top: 10px;
            // border: 1px solid;
            .btn {
              height: 26px;
              border: 1px solid #ccc;
              padding: 2px 26px;
              line-height: 26px;
              border-radius: 15px;
              font-size: 14px;
              color: blueviolet;
              cursor: pointer;
              margin-top: 5px;
              transition: all 0.5s;
            }
            .btn:hover {
              background: #716457;
              color: #fff;
            }
            p {
              font-size: 12px;
              color: #777;
              line-height: 50px;
              padding: 0 26px;
              margin-left: 20px;
            }
          }
        }
      }
    }
    .right {
      width: 360px;
      box-sizing: border-box;
      .hot {
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        .tit {
          height: 30px;
          font-size: 18px;
          font-weight: bold;
          line-height: 36px;
          i {
            // display: inline-block;
            width: 5px;
            height: 20px;
            background: blueviolet;
            margin-top: 8px;
            margin-right: 5px;
            float: left;
          }
          span {
            float: right;
            color: blueviolet;
            font-weight: normal;
            font-size: 14px;
            margin-top: 4px;
            cursor: pointer;
          }
        }
        ul {
          li {
            padding: 10px 0;
            margin-top: 5px;
            .item {
              color: #333;
              cursor: pointer;
              font-size: 14px;
              span {
                background: #ccc;
                width: 18px;
                height: 18px;
                text-align: center;
                line-height: 18px;
                font-size: 14px;
                display: inline-block;
                color: #fff;
              }
            }
            .item:hover {
              color: blueviolet;
            }
            .liulan {
              font-size: 12px;
              color: #777;
              margin-top: 10px;
            }
          }
          :nth-child(1) {
            .item {
              span {
                background: red;
              }
            }
          }
          :nth-child(2) {
            .item {
              span {
                background: orange;
              }
            }
          }
          :nth-child(3) {
            .item {
              span {
                background: orange;
              }
            }
          }
        }
      }
    }
  }
}
</style>